{% extends 'base.html' %}

{% block title %}电影聊天助手 - 电影推荐系统{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="row">
        <div class="col-md-8 mx-auto">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h4 class="mb-0">DeepSeek 电影AI助手</h4>
                </div>
                <div class="card-body">
                    <div class="chat-history" id="chatHistory" style="height: 400px; overflow-y: auto;">
                        <div class="message assistant">
                            <div class="message-content">
                                你好！我是电影AI助手，可以帮你推荐电影、回答电影相关问题或分析电影。请问有什么可以帮到你？
                            </div>
                        </div>
                    </div>
                    
                    <div class="chat-input mt-3">
                        <form id="chatForm" class="d-flex">
                            <input type="text" id="userMessage" class="form-control me-2" placeholder="输入你的问题..." required>
                            <button type="submit" class="btn btn-primary">发送</button>
                        </form>
                    </div>
                    
                    <div class="chat-suggestions mt-3">
                        <p class="small text-muted">你可以问我：</p>
                        <div class="d-flex flex-wrap">
                            <button class="btn btn-sm btn-outline-secondary m-1 suggestion">推荐心情舒畅的电影</button>
                            <button class="btn btn-sm btn-outline-secondary m-1 suggestion">有哪些类似《盗梦空间》的电影？</button>
                            <button class="btn btn-sm btn-outline-secondary m-1 suggestion">适合约会看的浪漫电影</button>
                            <button class="btn btn-sm btn-outline-secondary m-1 suggestion">最近有什么好看的科幻电影？</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<style>
    .message {
        margin-bottom: 15px;
        display: flex;
    }
    .message.user {
        justify-content: flex-end;
    }
    .message-content {
        max-width: 80%;
        padding: 10px 15px;
        border-radius: 18px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }
    .user .message-content {
        background-color: #dcf8c6;
        border-top-right-radius: 5px;
    }
    .assistant .message-content {
        background-color: #f1f0f0;
        border-top-left-radius: 5px;
    }
    .typing-indicator {
        display: inline-block;
        padding: 10px 15px;
        background-color: #f1f0f0;
        border-radius: 18px;
        border-top-left-radius: 5px;
    }
    .typing-animation {
        display: inline-block;
        width: 40px;
    }
    .typing-dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #888;
        margin-right: 4px;
        animation: typing-dot-animation 1.4s infinite ease-in-out both;
    }
    .typing-dot:nth-child(1) { animation-delay: 0s; }
    .typing-dot:nth-child(2) { animation-delay: 0.2s; }
    .typing-dot:nth-child(3) { animation-delay: 0.4s; }
    
    @keyframes typing-dot-animation {
        0%, 80%, 100% { transform: scale(0); opacity: 0; }
        40% { transform: scale(1); opacity: 1; }
    }
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const chatHistory = document.getElementById('chatHistory');
    const chatForm = document.getElementById('chatForm');
    const userMessage = document.getElementById('userMessage');
    const suggestions = document.querySelectorAll('.suggestion');
    
    // 设置CSRF令牌
    function getCsrfToken() {
        const cookies = document.cookie.split(';');
        for (const cookie of cookies) {
            const [name, value] = cookie.trim().split('=');
            if (name === 'csrftoken') {
                return value;
            }
        }
        return '';
    }
    
    // 添加消息到聊天界面
    function addMessage(content, isUser = false) {
        const messageDiv = document.createElement('div');
        messageDiv.className = `message ${isUser ? 'user' : 'assistant'}`;
        
        const contentDiv = document.createElement('div');
        contentDiv.className = 'message-content';
        contentDiv.textContent = content;
        
        messageDiv.appendChild(contentDiv);
        chatHistory.appendChild(messageDiv);
        
        // 滚动到底部
        chatHistory.scrollTop = chatHistory.scrollHeight;
    }
    
    // 显示正在输入指示器
    function showTypingIndicator() {
        const typingDiv = document.createElement('div');
        typingDiv.className = 'message assistant';
        typingDiv.id = 'typingIndicator';
        
        const indicatorDiv = document.createElement('div');
        indicatorDiv.className = 'typing-indicator';
        
        const animationDiv = document.createElement('div');
        animationDiv.className = 'typing-animation';
        
        for (let i = 0; i < 3; i++) {
            const dot = document.createElement('span');
            dot.className = 'typing-dot';
            animationDiv.appendChild(dot);
        }
        
        indicatorDiv.appendChild(animationDiv);
        typingDiv.appendChild(indicatorDiv);
        chatHistory.appendChild(typingDiv);
        
        // 滚动到底部
        chatHistory.scrollTop = chatHistory.scrollHeight;
    }
    
    // 隐藏正在输入指示器
    function hideTypingIndicator() {
        const indicator = document.getElementById('typingIndicator');
        if (indicator) {
            indicator.remove();
        }
    }
    
    // 发送消息到服务器
    async function sendMessage(message) {
        addMessage(message, true);
        userMessage.value = '';
        showTypingIndicator();
        
        const formData = new FormData();
        formData.append('message', message);
        
        try {
            const response = await fetch('/movies/api/chatbot/', {
                method: 'POST',
                headers: {
                    'X-CSRFToken': getCsrfToken()
                },
                body: formData
            });
            
            if (!response.ok) {
                throw new Error('网络响应不正常');
            }
            
            const data = await response.json();
            hideTypingIndicator();
            addMessage(data.response);
            
        } catch (error) {
            console.error('发送消息出错:', error);
            hideTypingIndicator();
            addMessage('抱歉，我现在无法回应，请稍后再试。');
        }
    }
    
    // 表单提交处理
    chatForm.addEventListener('submit', function(e) {
        e.preventDefault();
        const message = userMessage.value.trim();
        if (message) {
            sendMessage(message);
        }
    });
    
    // 点击建议
    suggestions.forEach(btn => {
        btn.addEventListener('click', function() {
            const message = this.textContent;
            userMessage.value = message;
            sendMessage(message);
        });
    });
});
</script>
{% endblock %} 